<template>
    <div class="home">
        <div class="daily-playlist" :type="type[0]">
            <div class="title">
                <h2>推荐歌单</h2>
                <router-link :to="`/GetMore/${type[0]}`" >更多</router-link>
            </div>
            <div class="item-list">
                <div class="item" 
                    v-for="item in playlist"
                    :key="item.id"
                    @click="toRank(item.id)">
                    <div class="wrapper">
                        <div class="img"><img :src="item.picUrl" alt=""></div>
                        <div class="name">{{item.name}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="daily-song" :type="type[1]">
            <div class="title">
                <h2>推荐歌曲</h2>
                <router-link :to="`/GetMore/${type[1]}`" >更多</router-link>
            </div>
            <!-- <div>{{$store.state.songUrl}}</div> -->
            <div class="item-list">
                <div 
                    class="item"
                    tag="div"
                    v-for="(item,index) in songs"
                    :key="index"
                    :to="`/player/${item.id}/${item.name}/${encode(item.picUrl)}`"
                    @click="play(item)"
                >
                    <div class="wrapper">
                        <div class="img"><img :src="item.picUrl" alt=""></div>
                        <div class="name">{{item.name}}</div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            playlist:[],
            songs:[],
            type:['playlist','songs'],
            // 为什么用playerData接收没用
            playerData:this.$store.state.songUrl,
        }
    },
    computed: {
        // ...mapState(['songUrl'])
    },
    methods: {
        encode(url) {
            if(url) return encodeURIComponent(url)
        },
        toRank(id) {
            this.$router.push(`/toplist/${id}`)
        },
        play(item) {
            console.log(item)
            this.$store.dispatch("getSong",item.id);
            this.$store.state.songCover = item.picUrl;
            this.$store.state.songName = item.name;
            this.$api.getLyric({
                id:item.id
            }).then(res => {
                this.$store.state.songLriycs = res.lrc.lyric;
            });
        },
        // onTimeUpdate() {
        //     console.log(this.$refs.player.currentTime)
        // }
    },
    mounted() {
        //获取歌单
        this.$api.getMusicList({
            limit:9
        }).then(res => {
            this.playlist = res.result
            res.type = this.type[0]
            // console.log(this.playlist)
        });
        //获取歌曲
        this.$api.getSongs({
            limit:12
        }).then(res => {
            this.songs = res.result;
            res.type = this.type[1];
        });
    },
}
</script>

<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
page {
    padding: 20px 0;
}
.daily-playlist, .daily-song {
    display: flex;
    flex-wrap: wrap;
    overflow: scroll;
    align-content: center;
    justify-content: space-between;
    padding: 0px 15px;
    .item-list {
        display: flex;
        flex-wrap: wrap;
        .item {
            margin: 0 5px;
        }
    }
    .title {
        width: 100%;
        height: 30px;
        display: flex;
        flex: 1;
        align-content: center;
        h2 {
            flex: 1;
            width: 100vw;
        }
        a {
            line-height: 30px;
        }
    }
    .wrapper {
    width: 118px;
    height: 160px;
    margin-top: 10px;
    overflow: hidden;
    .name {
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
    }
    .img {
        width: 130px;
        img {
            width: 100%;
            }
        }
    }
}
audio {
    position: fixed;
    bottom: 5vh;
}
</style>